<template>
    <div class='study-container'>
        <header-v text='学习'></header-v>
        <div class="study-header">
            <mt-button class='offline' type='primary' size='small' ><i class='icon-circle-arrow-right'>&nbsp;前往离线学习</i> </mt-button>
        </div>
        <div >
            <ul class="study-content">
                <li class='study-lesson' v-for='n in 5'>
                    <img src="~assets/Miku.jpg" alt="">
                    <router-link to='a' class='lesson-position'>
                        <div class="lesson-title">
                            <span>第三期销售顾问培训课程</span>
                            <span></span>
                        </div>
                        <div class='lesson-footer'>
                            <span class="lesson-complete">
                                <i class='icon-file-alt'></i>
                                <span>已通过</span>
                            </span>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import { Button } from 'mint-ui'
    import HeaderV from '../Header.vue'
    import 'mint-ui/lib/button/style.css'
    export default{
        data(){
            return { 
            }
        },
        components:{
            mtButton:Button,
            HeaderV,
        }
        
    }
</script>
<style lang='scss'>
    /* Study.vue */
    @import '../../assets/css/function';
    .study-container{
        margin-bottom:pxtorem(60px);
            .study-header{
                background:white;
                height:pxtorem(50px);
                text-align:right;
                line-height:pxtorem(50px); 
                overflow:hidden;
            .offline{
                    float:right;
                    margin-right:pxtorem(15px);
                    margin-top:pxtorem(10px);
                }
            }
             ul.study-content{
                padding:pxtorem(15px) pxtorem(10px) 0 pxtorem(10px);
                li.study-lesson{
                    position:relative;
                    height:pxtorem(100px);
                    overflow:hidden;
                    img{
                        width:100%;
                        opacity:0.5;
                    }
                    border-radius:5px;
                    margin-bottom:pxtorem(10px);
                }
                a.lesson-position{
                    width:100%;
                    height:100%;
                    background:rgba(0,0,0,.3);
                    position:absolute;
                    font-size:16px;
                    top:0;
                    left:0;
                    color:white;
                    .lesson-title{
                        width:100%;
                        color:white;
                        height:pxtorem(80px);
                        line-height:pxtorem(80px);
                        span{
                            margin-left:pxtorem(20px);
                        }
                    }
                    .lesson-footer{
                        /*position:absolute;*/
                        width:100%;
                        height:pxtorem(20px);
                        line-height:pxtorem(20px);
                        text-align:right;
                        font-size:pxtorem(14px);
                        background:#fe8208;
                        span.lesson-complete{
                            margin-right:pxtorem(15px);
                            i{
                                margin-right:pxtorem(5px);
                            }
                        }
                        
                    }
                }
            }
    }
    
</style>